<template>
  <view class="container">
    <!-- 列表区域 -->
    <scroll-view
      class="card-list"
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 卡片项 -->
      <view v-for="(item, index) in cardList" :key="index" class="card-item">
        <view class="card-header">
          <text class="card-number">编号：{{ item.card_id }}</text>
          <view :class="['status', item.is_use ? 'used' : 'unused']">
            {{ item.is_use ? "已使用" : "未使用" }}
          </view>
        </view>

        <view class="card-body">
          <view class="info-item">
            <text class="label">卡密：</text>
            <text class="value">{{ hideCardSecret(item.card_password) }}</text>
          </view>
          <view class="info-item">
            <text class="label">录入时间：</text>
            <text class="value">{{ formatTime(item.create_time) }}</text>
          </view>
          <view class="info-item">
            <text class="label">归属人：</text>
            <text class="value">{{ item._id }}</text>
          </view>
        </view>
      </view>

      <!-- 加载提示 -->
      <view class="loading-tip">
        {{ loadingText }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardList: [], // 卡片列表
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页数量
      total: 0, // 总数据量
      isRefreshing: false, // 是否正在刷新
      isLoading: false, // 是否正在加载
      hasMore: true, // 是否有更多数据
    };
  },
  computed: {
    loadingText() {
      if (!this.hasMore) return "没有更多数据啦~";
      return this.isLoading ? "正在加载中..." : "上拉加载更多";
    },
  },
  created() {
    this.loadData();
  },
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true;
      this.errorMessage = "";
      try {
        const db = uniCloud.database();
        const collection = db
          .collection("jlg-card")
          .field({
            card_id: true,
            card_password: true,
            create_time: true,
            is_use: true,
          })
          .get()
          .then((res) => {
            console.log(res.result.data[0], "res");
			this.cardList = res.result.data;
          });
        console.log(collection, "collection");
      } catch (error) {
        console.error("数据加载失败:", error);
        this.errorMessage = "数据加载失败，请稍后重试";
      } finally {
        this.loading = false;
      }
    },

    // 模拟数据
    mockData() {
      const data = [];
      for (let i = 0; i < this.pageSize; i++) {
        data.push({
          cardNumber: `TRAVEL-${this.pageNum}-${i + 1}`,
          secret: Math.random().toString(36).slice(2, 18).toUpperCase(),
          createTime: new Date().getTime() - Math.random() * 1000000000,
          owner: `用户${Math.floor(Math.random() * 100)}`,
          isUsed: Math.random() > 0.5,
        });
      }
      return data;
    },

    // 下拉刷新
    onRefresh() {
      if (this.isRefreshing) return;
      this.isRefreshing = true;
      this.pageNum = 1;
      this.loadData();
    },

    // 上拉加载
    loadMore() {
      if (!this.hasMore || this.isLoading) return;
      this.pageNum++;
      this.loadData();
    },

    // 隐藏卡密
    hideCardSecret(secret) {
      if (!secret) return "";
      return `${secret.slice(0, 4)}****${secret.slice(-4)}`;
    },

    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
        .getHours()
        .toString()
        .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  height: 100vh;
  box-sizing: border-box;
  background: #f5f5f5;
}

.card-list {
  height: 100%;
}

.card-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;

    .card-number {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }

    .status {
      font-size: 24rpx;
      padding: 8rpx 16rpx;
      border-radius: 8rpx;

      &.used {
        background: #f0f0f0;
        color: #999;
      }

      &.unused {
        background: #e8f5e9;
        color: #4caf50;
      }
    }
  }

  .card-body {
    padding-top: 20rpx;

    .info-item {
      display: flex;
      margin-bottom: 12rpx;
      font-size: 26rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #666;
        min-width: 140rpx;
      }

      .value {
        color: #333;
        flex: 1;
        word-break: break-all;
      }
    }
  }
}

.loading-tip {
  text-align: center;
  color: #999;
  font-size: 26rpx;
  padding: 30rpx 0;
}
</style>
